<div bsModal #actionModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="actionModal"
  aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog modal-xxl">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">
          {{ title }}管理
        </h4>
        <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
          <tabset class="tab-container tabbable-line">
            <tab heading="批量管理" (select)="tabSelect(1)" customClass="m-tabs__item">
              <p-table #carDataTable [value]="carGeneralTools" [(selection)]="selectCarGeneralTools" [paginator]="false"
                [lazy]="true" [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                [resizableColumns]="primengTableHelper.resizableColumns">
                <ng-template pTemplate="header">
                  <tr>
                    <th style="width: 38px">
                      <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                    </th>
                    <th style="width: 150px" pSortableColumn="title">
                      名称
                      <p-sortIcon field="title"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="brand">
                      品牌
                      <p-sortIcon field="brand"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="model">
                      型号
                      <p-sortIcon field="model"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="spec">
                      规格
                      <p-sortIcon field="spec"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="serialNo">
                      出厂编号
                      <p-sortIcon field="serialNo"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="unitPrice">
                      单价
                      <p-sortIcon field="unitPrice"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="location">
                      位置
                      <p-sortIcon field="location"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="intoStockDate">
                      入库日期
                      <p-sortIcon field="intoStockDate"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="category">
                      类别
                      <p-sortIcon field="category"></p-sortIcon>
                    </th>
                    <th style="width: 150px">
                      工具类型
                    </th>
                    <th style="width: 150px">
                      计量单位
                    </th>
                    <th style="width: 150px" pSortableColumn="isNeedVerification">
                      是否需要鉴定周期
                      <p-sortIcon field="isNeedVerification"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="verificationDate">
                      鉴定日期
                      <p-sortIcon field="verificationDate"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="nextVerificationDate">
                      鉴定有效期
                      <p-sortIcon field="nextVerificationDate"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="maxLoad">
                      最大载荷
                      <p-sortIcon field="maxLoad"></p-sortIcon>
                    </th>
                    <th style="width: 150px">
                      制造厂商
                    </th>
                    <th style="width: 200px">
                      备注
                    </th>
                    <th style="width: 200px">
                      备注1
                    </th>
                  </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record="$implicit">
                  <tr>
                    <td style="width: 38px">
                      <p-tableCheckbox [value]="record"></p-tableCheckbox>
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 名称</span>
                      {{ record.title }}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 品牌</span>
                      {{record.brand}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 型号</span>
                      {{record.model}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 规格</span>
                      {{record.spec}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 出厂编号</span>
                      {{record.serialNo}}
                    </td>

                    <td style="width: 150px">
                      <span class="ui-column-title"> 单价</span>
                      {{record.unitPrice}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 位置</span>
                      {{record.location}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 入库日期</span>
                      {{record.intoStockDate | momentFormat:'YYYY-MM-DD'}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 类别</span>
                      {{record.categoryName}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 工具类型</span>
                      {{record.classificationName}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 计量单位</span>
                      {{record.unit}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 需周期鉴定</span>
                      {{record.isNeedVerification}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 鉴定日期</span>
                      {{record.verificationDate | momentFormat:'YYYY-MM-DD'}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 鉴定有效期</span>
                      {{record.nextVerificationDate | momentFormat:'YYYY-MM-DD'}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 最大载荷</span>
                      {{record.maxLoad}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 制造厂商</span>
                      {{record.manufacturer}}
                    </td>
                    <td style="width: 200px">
                      <span class="ui-column-title"> 备注</span>
                      {{ record.remark}}
                    </td>

                    <td style="width: 200px">
                      <span class="ui-column-title"> 备注1</span>
                      {{ record.remark1}}
                    </td>
                  </tr>
                </ng-template>
              </p-table>

              <div class="row" style="margin-top: 40px;">
                <div class="col-6">
                  <div class="form-group">
                    <label for="outStockInfo">{{ title }}信息</label>
                    <input id="outStockInfo" type="text" name="outStockInfo" class="form-control" [(ngModel)]="outStockInfo">
                  </div>
                </div>
                <div class="col-6">
                  <div class="form-group">
                    <label for="outRemark">{{ title }}备注</label>
                    <input id="outRemark" type="text" name="outRemark" class="form-control" [(ngModel)]="outRemark">
                  </div>
                </div>
              </div>

              <div style="text-align: right;">
                <button type="button" (click)="outStocks()" class="btn btn-primary" [disabled]="!selectCarGeneralTools.length"
                  [buttonBusy]="saving" [busyText]="title + '中...'"><i class="fa fa-save"></i> <span>{{ title }}</span></button>
              </div>

            </tab>
            <tab heading="入库管理" (select)="tabSelect(2)" customClass="m-tabs__item">
              <p-table #outDataTable (onLazyLoad)="getOutGeneralTools($event)" [value]="outGeneralTools" [(selection)]="selectOutGeneralTools"
                rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true" [scrollable]="true"
                ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive" [resizableColumns]="primengTableHelper.resizableColumns">
                <ng-template pTemplate="header">
                  <tr>
                    <th style="width: 38px">
                      <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                    </th>
                    <th style="width: 150px" pSortableColumn="title">
                      名称
                      <p-sortIcon field="title"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="brand">
                      品牌
                      <p-sortIcon field="brand"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="model">
                      型号
                      <p-sortIcon field="model"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="spec">
                      规格
                      <p-sortIcon field="spec"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="serialNo">
                      出厂编号
                      <p-sortIcon field="serialNo"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="unitPrice">
                      单价
                      <p-sortIcon field="unitPrice"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="location">
                      位置
                      <p-sortIcon field="location"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="intoStockDate">
                      入库日期
                      <p-sortIcon field="intoStockDate"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="category">
                      类别
                      <p-sortIcon field="category"></p-sortIcon>
                    </th>
                    <th style="width: 150px">
                      工具类型
                    </th>
                    <th style="width: 150px">
                      计量单位
                    </th>
                    <th style="width: 150px" pSortableColumn="isNeedVerification">
                      是否需要鉴定周期
                      <p-sortIcon field="isNeedVerification"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="verificationDate">
                      鉴定日期
                      <p-sortIcon field="verificationDate"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="nextVerificationDate">
                      鉴定有效期
                      <p-sortIcon field="nextVerificationDate"></p-sortIcon>
                    </th>
                    <th style="width: 150px" pSortableColumn="maxLoad">
                      最大载荷
                      <p-sortIcon field="maxLoad"></p-sortIcon>
                    </th>
                    <th style="width: 150px">
                      制造厂商
                    </th>
                    <th style="width: 200px">
                      备注
                    </th>
                    <th style="width: 200px">
                      备注1
                    </th>
                  </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record="$implicit">
                  <tr>
                    <td style="width: 38px">
                      <p-tableCheckbox [value]="record"></p-tableCheckbox>
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 名称</span>
                      {{ record.title }}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 品牌</span>
                      {{record.brand}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 型号</span>
                      {{record.model}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 规格</span>
                      {{record.spec}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 出厂编号</span>
                      {{record.serialNo}}
                    </td>

                    <td style="width: 150px">
                      <span class="ui-column-title"> 单价</span>
                      {{record.unitPrice}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 位置</span>
                      {{record.location}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 入库日期</span>
                      {{record.intoStockDate | momentFormat:'YYYY-MM-DD'}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 类别</span>
                      {{record.categoryName}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 工具类型</span>
                      {{record.classificationName}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 计量单位</span>
                      {{record.unit}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 需周期鉴定</span>
                      {{record.isNeedVerification}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 鉴定日期</span>
                      {{record.verificationDate | momentFormat:'YYYY-MM-DD'}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 鉴定有效期</span>
                      {{record.nextVerificationDate | momentFormat:'YYYY-MM-DD'}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 最大载荷</span>
                      {{record.maxLoad}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 制造厂商</span>
                      {{record.manufacturer}}
                    </td>
                    <td style="width: 200px">
                      <span class="ui-column-title"> 备注</span>
                      {{ record.remark}}
                    </td>

                    <td style="width: 200px">
                      <span class="ui-column-title"> 备注1</span>
                      {{ record.remark1}}
                    </td>
                  </tr>
                </ng-template>
              </p-table>
              <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                {{l('NoData')}}
              </div>
              <div class="primeng-paging-container">
                <p-paginator rows="{{primengTableHelper.defaultRecordsCountPerPage}}" #outPaginator (onPageChange)="getOutGeneralTools($event)"
                  [totalRecords]="primengTableHelper.totalRecordsCount" [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                </p-paginator>
                <span class="total-records-count">
                  共计：{{primengTableHelper.totalRecordsCount}}
                </span>
              </div>

              <div class="row" style="margin-top: 40px;">
                <div class="col-6">
                  <div class="form-group">
                    <label for="backStockInfo">入库信息</label>
                    <input id="backStockInfo" type="text" name="backStockInfo" class="form-control" [(ngModel)]="backStockInfo">
                  </div>
                </div>
                <div class="col-6">
                  <div class="form-group">
                    <label for="backRemark">入库备注</label>
                    <input id="backRemark" type="text" name="backRemark" class="form-control" [(ngModel)]="backRemark">
                  </div>
                </div>
              </div>

              <div style="text-align: right;">
                <button type="button" (click)="backStocks()" class="btn btn-primary" [disabled]="!selectOutGeneralTools.length"
                  [buttonBusy]="saving" [busyText]="'入库中...'"><i class="fa fa-save"></i> <span> 入库 </span></button>
              </div>
            </tab>
            <tab heading="日志管理" (select)="tabSelect(3)" customClass="m-tabs__item">
              <p-table #logDataTable (onLazyLoad)="getGeneralToolLogs($event)" [value]="generalToolLogs"
                rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true" [scrollable]="true"
                ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive" [resizableColumns]="primengTableHelper.resizableColumns">
                <ng-template pTemplate="header">
                  <tr>
                    <th style="width: 150px">
                      操作类型
                    </th>
                    <th style="width: 150px">
                      出库信息
                    </th>
                    <th style="width: 150px" pSortableColumn="outDate">
                      出库时间
                      <p-sortIcon field="outDate"></p-sortIcon>
                    </th>
                    <th style="width: 200px">
                      出库备注
                    </th>
                    <th style="width: 150px">
                      入库信息
                    </th>
                    <th style="width: 150px" pSortableColumn="backDate">
                      入库时间
                      <p-sortIcon field="backDate"></p-sortIcon>
                    </th>
                    <th style="width: 200px">
                      入库备注
                    </th>
                  </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record="$implicit">
                  <tr>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 操作类型</span>
                      {{record.operationName}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 出库信息</span>
                      {{record.outStockInfo}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 出库时间</span>
                      {{record.outDate | momentFormat:'YYYY-MM-DD'}}
                    </td>
                    <td style="width: 200px">
                      <span class="ui-column-title"> 出库备注</span>
                      {{record.outRemark}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 入库信息</span>
                      {{record.backStockInfo}}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 入库时间</span>
                      {{record.backDate | momentFormat:'YYYY-MM-DD'}}
                    </td>
                    <td style="width: 200px">
                      <span class="ui-column-title"> 入库备注</span>
                      {{record.backRemark}}
                    </td>

                  </tr>
                </ng-template>
              </p-table>
              <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                {{l('NoData')}}
              </div>
              <div class="primeng-paging-container">
                <p-paginator rows="{{primengTableHelper.defaultRecordsCountPerPage}}" #logPaginator (onPageChange)="getGeneralToolLogs($event)"
                  [totalRecords]="primengTableHelper.totalRecordsCount" [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                </p-paginator>
                <span class="total-records-count">
                  共计：{{primengTableHelper.totalRecordsCount}}
                </span>
              </div>
            </tab>
          </tabset>
        </div>
      </div>
    </div>
  </div>
</div>
